<template>
	<view>
		<view class="artistes" v-if="fensiList.length != 0">
			<view class="artistesBox" v-for="(item,key) in fensiList" :key="key">
				<view class="artInfos" @click="gotoArtiter(item.UserID)">
					<view class="artHeadPic">
						<head-wear :width="80" :height="80" :borderWidth="4" :userInfo="item" :WxHeadPic="item.WxHeadPic" :UserLevelID="item.UserLevelID" image-width="30" image-height="20" size="16" right="-7" bottom="0" oneRight="0"></head-wear>
					</view>
					<view class="artInfo">
						<view class="artName">
							<text class="one-ellipsis" style="display: block;max-width: 90%;">{{item.NickName}}</text>
							<image :src="baseUrl + 'icon/boy.png'" class="sex-image-size marginLeft-10"  v-if="JSON.parse(item.UserSex).text === '男'"></image>
							<image :src="baseUrl + 'icon/girl.png'" class="sex-image-size marginLeft-10" v-if="JSON.parse(item.UserSex).text === '女'"></image>
							
							<auth-label v-if="item.isAuthOk == 2" :size="18" height="30"></auth-label>
							<personality-label v-if="item.BeautifulWomen == 1" :size="18" height="30"></personality-label>
							<image :src="baseUrl + 'icon/enterprise.png'" class="company-image-size marginLeft-10" v-if="item.isCompanyAuth && item.isCompanyAuth == 1"></image>
							
						</view>
						<view class="artLabel">
							<text>
								<text v-for="(roleitem,roleindex) in item.Roles" :key="roleindex">
									{{ roleitem.LabelName }}
									<text v-if="roleindex < item.Roles.length-1">，</text>
								</text>
							</text>
							<text class="geline"> | </text>
							<text class="artAddr">{{ item.UserCity }}</text>
						</view>
					</view>
					<view class="artState">
						<view class="fs-24"v-if="item.isOnline == 1">在线</view>
						<view class="fs-24"v-else>
							{{ $common.timeDiff(item.onlineTime,new Date()) }}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="row-center marginTop-50" v-else>
			<view class="">
				<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
				<view class="text-align-center">
					暂无粉丝
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import AuthLabel from "@/components/authLabel.vue";
	import PersonalityLabel from "@/components/personalityLabel.vue";
	import HeadWear from "@/components/headwear.vue"
	export default {
		components: {
			AuthLabel,
			PersonalityLabel,
			HeadWear
		},
		data() {
			return {
				fensiList: [],
				baseUrl: ''
			};
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
			this.loadData();
		},
		methods:{
			loadData() {
				this.$httpost('/UserCenter/fensi', {}).then(res => {
					this.fensiList = res.data.fensiList
				});
			},
			changeTabs(e) {
				console.log(e)
				this.switchTab(e.index)
			},
			tabChange(e) {
				console.log(e)
				if (e.detail.source == 'touch') {
					let index = e.target.current || e.detail.current;
					this.switchTab(index);
				}
			},
			switchTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
			},
			gotoArtiter(artisterID) {
				uni.navigateTo({
					url: '/artistesPages/pages/artister?artisterID=' + artisterID
				})
			},
		}
	}
</script>

<style lang="scss">
	.artistes {
		padding:10rpx
	}
	.artistesBox {
		margin-top:10rpx;
		height:auto;
		background-color: #FFF;
		border-radius: 15rpx;
		padding:26rpx;
		padding-bottom:40rpx;
	}
	.artInfos {
		// display: flex;
		// justify-content: space-between;
		height:60rpx;
	}
	.artHeadPic {
		position:relative;
		float:left;
		width:80rpx;
		height:80rpx;
		background-color: #CCC;
		// background-image: url('https://hbimg.huabanimg.com/53392e6876c6a69c39da3a2a63c3a62ed4f9d26d23a781-4ckBVh_fw658');
		background-position: center;
		background-size: cover;
		border-radius: 80rpx;
	}
	.artHeadPic image {
		width:80rpx;
		height:80rpx;
		border-radius: 80rpx;
	}
	.artInfo {
		float:left;
		width:60vw;
		margin-left:20rpx;
	}
	.artName {
		font-size:30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.artLabel {
		margin-top: 10rpx;
		font-size:20rpx;
		color:#999;
		white-space: nowrap;
		max-width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.artState {
		width:120rpx;
		float:right;
		text-align: right;
		color:#999
	}
	.geline {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.artAddr {

	}
</style>
